<template lang="pug">
div
  //- g-h.tab-bar(v-if="showBarcode" j-c="space-around")
    div.tab-bar-item(
        :class="{'tab-is-active': active === 'ScanPage'}"
        @click="active = 'ScanPage'"
        )
      div 扫描页面
    div.tab-bar-item(
        :class="{'tab-is-active': active === 'BarcodeInfo'}"
        @click="active = 'BarcodeInfo'"
        )
      div 条码详情

  mt-tab-container(v-model="active")
    mt-tab-container-item(id="ScanPage")
      ScanPage
    mt-tab-container-item(id="BarcodeInfo")
      BarcodeInfo

</template>

<script>
import api from "$api"
import util from "$util"
import { mapState } from "vuex"

import ScanPage from "./ScanPage.vue"
import BarcodeInfo from "./BarcodeInfo.vue"

export default {
  components: {
    ScanPage,
    BarcodeInfo,
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      showBarcode: state => state.receipt.showBarcode,
    }),
    active: {
      get() {
        return this.$store.state.receipt.active
      },
      set(v) {
        this.$store.commit("receipt/selectTab", {
          tab: v,
        })
      },
    },
  },
  // 在离开页面时，清空所有这个页面缓存的数据
  beforeDestroy() {
    this.$store.commit("receipt/reset")
  },
}
</script>

<style lang="stylus" scoped>

.tab-bar
  z-index: 2
  position: fixed
  bottom: 0
  left: 0
  right: 0
  border-top: 1px solid grey300
  background: grey200
  white-space: nowrap
  overflow-no-scrollbar()

  &-item
    width: 25%
    padding: 0.5rem 0
    font-size: 16px
    color: grey800

    display: flex
    flex-flow: column
    justify-content: center
    align-items: center

.tab-is-active
  color: cyan600

</style>
